<template>
  <t-dialog
    :header="header"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="80%"
    top="5%"
  >
  <div style="height: 65vh;display: flex;flex-direction: column;gap: 10px">
    <t-comment
      :author="item.replyType === '1'?'我': '管理员'"
      :datetime="item.createTime"
      v-for="(item,index) in data"
      :key="index"
    >
      <template #content>
<!--        <div v-html="item.content"></div>-->
        <inner-html :content="item.content"></inner-html>
      </template>
    </t-comment>
    <t-drawer
      :visible="drawerVisible"
      showInAttachedElement
      :showOverlay="false"
      size="70%"
      :preventScrollThrough="false"
      header="意见回复"
    >
               <t-form ref="form" :colon="true" label-align="top" :data="formData" labelWidth="100px" :rules="rules">
                 <t-form-item name="content" label="内容">
                   <tiny-mce-editor v-model="formData.content"></tiny-mce-editor>
                 </t-form-item>
               </t-form>
      <template  #footer>
        <t-button theme="default" @click="drawerVisible = false">关闭回复界面</t-button>
        <t-button theme="primary" @click="onSubmit()">提交</t-button>
      </template>
    </t-drawer>
  </div>
    <template #footer>
      <t-button theme="default" @click="closeDialog">取消</t-button>
      <t-button theme="primary" @click="drawerVisible = true;dialog.openReply=true">打开回复界面</t-button>
    </template>

  </t-dialog>

</template>

<script>

import TinyMceEditor from "@/components/TinyMceEditor/index.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";


export default {
  name: "feedback-reply",
  components:{
    TinyMceEditor,
    InnerHtml
  },
  props: ['header', 'objId', 'replyType'],
  data(){
    return {
      drawerVisible: false,
      dialog:{

      },
      formData:{
        problemId: this.objId,
        content: '',
        replyType: this.replyType,
      },
      rules:{
        content: [
          { required: true, message: "内容不能为空" }
        ]
      },
      visible: true,
      data: [],
      columns: [
        {
          colKey: "replyType",
          title: "回复人",
          align: "center",
          width: 100
        },
        {
          colKey: "content",
          title: "内容",
          align: "center",
        },
        {
          colKey: "createTime",
          title: "回复时间",
          align: "center",
          width: 180
        },
      ]
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.formData.problemId = val;
          this.getList();
        }
      }
    },
  },
  methods:{
    onSubmit(){
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.$api.system.feedback.replayAdd(this.formData).then((response) => {
            this.$message.success("回复成功");
            this.drawerVisible = false;
            this.getList();
          }).catch((e) => {
            this.$message.error(e.toString());
          });
        }else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
    getList(){
      this.$api.system.feedback.replayList(this.objId).then(response => {
        this.data = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style scoped>

</style>
